<script setup>
import {
  ArrowDown,
  School,
  ShoppingCartFull,
  ChatDotRound,
  User,
} from '@element-plus/icons-vue'
import { reactive } from 'vue';
const images = reactive([
  { id: 1, src: '/static/images/2.jpg'},
  { id:2, src: '/static/images/3.jpg'},
  { id: 3, src: '/static/images/7.jpg'},
  { id: 4, src: '/static/images/8.jpg'},
  { id: 5, src: '/static/images/14.jpg'},
  { id: 6, src: '/static/images/13.jpg'},

])
</script>

<template>
  <div class="tou">
    <div class="tao" style="color: #ffaad5;">
      <p class="xianhua">鲜 花 网</p>
      <div class="tao2">Xianhuawang.com</div>
    </div>
    <div class="tao3">
      <el-dropdown>
        <span class="el-dropdown-link">
          长沙
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>北京</el-dropdown-item>
            <el-dropdown-item>上海</el-dropdown-item>
            <el-dropdown-item>深圳</el-dropdown-item>
            <el-dropdown-item>温州</el-dropdown-item>
            <el-dropdown-item>郑州</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="tao4">提供市内送花到手服务，表白快人一步！</div>
  </div>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="el-header1">网页首页 </div>
        <div class="el-header2"> 今日推荐 </div>
        <div class="el-header3"> 热销排行 </div>
        <div class="el-header4"> 新品上市</div>
        <div class="el-header5">可配送至全国1000多个城市,市区内免配送费！</div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-icon>
            <School />
          </el-icon>
          <div class="ce1"><router-link to="/products" >花卉商城</router-link></div>
          <el-icon>
            <ShoppingCartFull />
          </el-icon>
          <div class="ce2"><router-link to="/cart" >购物车</router-link></div>
          <el-icon>
            <ChatDotRound />
          </el-icon>
          <div class="ce3"><router-link to="/ProfilePage" >用户信息管理</router-link></div>
          <el-icon>
            <User />
          </el-icon>
          <div class="ce4"><router-link to="/users" >个人中心</router-link></div>
        </el-aside>
        <el-main>
          <el-carousel :interval="4000" type="card">
            <el-carousel-item v-for="image in images" :key="image">
              <img :src="image.src" alt="" class="zhutu" style="width: 1000px;height: 300px;">
            </el-carousel-item>
          </el-carousel>
        </el-main>
      </el-container>
    </el-container>
  </div>
  <div class="liebiao">
    <div class="card-header">
      今日推荐 
     </div>
    <el-card class="tj">
        <img src="/public/static/images/1.jpg" alt="" class="tjtup"><br>
        <span>生日鲜花</span><br>
        <span class="cl">材料:玫瑰花向日葵小花束,9朵红玫瑰/小花束: 免费附送精情美贺卡，代写况福 </span><br>
        <span style="color: #ffaad5; font-weight: bold; font-size: 18px;">￥399</span>
        <el-button>加入购物车</el-button>
  </el-card>
  <el-card class="tj">
        <img src="/public/static/images/4.jpg" alt="" class="tjtup"><br>
        <span>生日鲜花</span><br>
        <span class="cl">材料:玫瑰花向日葵小花束,9朵红玫瑰/小花束: 免费附送精情美贺卡，代写况福 </span><br>
        <span style="color: #ffaad5; font-weight: bold; font-size: 18px;">￥99</span>
        <el-button>加入购物车</el-button>
  </el-card>
  <el-card class="tj">
        <img src="/public/static/images/5.jpg" alt="" class="tjtup"><br>
        <span>生日鲜花</span><br>
        <span class="cl">材料:玫瑰花向日葵小花束,9朵红玫瑰/小花束: 免费附送精情美贺卡，代写况福 </span><br>
        <span style="color: #ffaad5; font-weight: bold; font-size: 18px;">￥132</span>
        <el-button>加入购物车</el-button>
  </el-card>
  <el-card class="tj">
        <img src="/public/static/images/13.jpg" alt="" class="tjtup"><br>
        <span>生日鲜花</span><br>
        <span class="cl">材料:玫瑰花向日葵小花束,9朵红玫瑰/小花束: 免费附送精情美贺卡，代写况福 </span><br>
        <span style="color: #ffaad5; font-weight: bold; font-size: 18px;">￥456</span>
        <el-button>加入购物车</el-button>
  </el-card>
  </div>
  <div class="liebiao">
    <div class="card-header">
      热销排行
     </div>
    <el-card class="tj">
        <img src="/public/static/images/9.jpg" alt="" class="tjtup"><br>
        <span>节日鲜花</span><br>
        <span class="cl">材料:玫瑰花向日葵小花束,9朵红玫瑰/小花束: 免费附送精情美贺卡，代写况福 </span><br>
        <span style="color: #ffaad5; font-weight: bold; font-size: 18px;">￥399</span>
        <el-button>加入购物车</el-button>
  </el-card>
  <el-card class="tj">
        <img src="/public/static/images/10.jpg" alt="" class="tjtup"><br>
        <span>玫瑰花向日葵小花束</span><br>
        <span class="cl">材料:玫瑰花向日葵小花束,9朵红玫瑰/小花束: 免费附送精情美贺卡，代写况福 </span><br>
        <span style="color: #ffaad5; font-weight: bold; font-size: 18px;">￥99</span>
        <el-button>加入购物车</el-button>
  </el-card>
  <el-card class="tj">
        <img src="/public/static/images/12.jpg" alt="" class="tjtup"><br>
        <span>生日鲜花</span><br>
        <span class="cl">材料:玫瑰花向日葵小花束,9朵红玫瑰/小花束: 免费附送精情美贺卡，代写况福 </span><br>
        <span style="color: #ffaad5; font-weight: bold; font-size: 18px;">￥132</span>
        <el-button>加入购物车</el-button>
  </el-card>
  <el-card class="tj">
        <img src="/public/static/images/15.jpg" alt="" class="tjtup"><br>
        <span>生日鲜花</span><br>
        <span class="cl">材料:玫瑰花向日葵小花束,9朵红玫瑰/小花束: 免费附送精情美贺卡，代写况福 </span><br>
        <span style="color: #ffaad5; font-weight: bold; font-size: 18px;">￥456</span>
        <el-button>加入购物车</el-button>
  </el-card>
  </div>
  <div class="liebiao">
    <div class="card-header">
      新品上市
     </div>
    <el-card class="tj">
        <img src="/public/static/images/17.jpg" alt="" class="tjtup"><br>
        <span>节日鲜花</span><br>
        <span class="cl">材料:玫瑰花向日葵小花束,9朵红玫瑰/小花束: 免费附送精情美贺卡，代写况福 </span><br>
        <span style="color: #ffaad5; font-weight: bold; font-size: 18px;">￥399</span>
        <el-button>加入购物车</el-button>
  </el-card>
  <el-card class="tj">
        <img src="/public/static/images/16.jpg" alt="" class="tjtup"><br>
        <span>玫瑰花向日葵小花束</span><br>
        <span class="cl">材料:玫瑰花向日葵小花束,9朵红玫瑰/小花束: 免费附送精情美贺卡，代写况福 </span><br>
        <span style="color: #ffaad5; font-weight: bold; font-size: 18px;">￥99</span>
        <el-button>加入购物车</el-button>
  </el-card>
  <el-card class="tj">
        <img src="/public/static/images/18.jpg" alt="" class="tjtup"><br>
        <span>生日鲜花</span><br>
        <span class="cl">材料:玫瑰花向日葵小花束,9朵红玫瑰/小花束: 免费附送精情美贺卡，代写况福 </span><br>
        <span style="color: #ffaad5; font-weight: bold; font-size: 18px;">￥132</span>
        <el-button>加入购物车</el-button>
  </el-card>
  <el-card class="tj">
        <img src="/public/static/images/20.jpg" alt="" class="tjtup"><br>
        <span>生日鲜花</span><br>
        <span class="cl">材料:玫瑰花向日葵小花束,9朵红玫瑰/小花束: 免费附送精情美贺卡，代写况福 </span><br>
        <span style="color: #ffaad5; font-weight: bold; font-size: 18px;">￥456</span>
        <el-button>加入购物车</el-button>
  </el-card>
  </div>
</template>

<style scoped>
.tou {
  display: flex;
}

.tao {
  width: 200px;
  height: 50px;
}

.tao2 {
  width: 150px;
  height: 30px;
  margin-top: -30px;
  margin-left: 28px;
}

.xianhua {
  font-size: 35px;
  font-weight: bold;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.tao3 {
  width: 100px;
  height: 20px;
  margin-top: 50px;
}

.tao4 {
  margin-top: 80px;
  margin-left: -65px;
  color: #BEBEBE;
}

.el-header {
  margin-top: 20px;
  background-color: #ffaad5;
}

.el-header1 {
  color: #fff;
  margin-top: 15px;
  width: 100px;
  font-size: 20px;
}

.el-header2 {
  color: #fff;
  margin-top: -25px;
  margin-left: 120px;
  width: 100px;
  font-size: 20px;
}

.el-header3 {
  color: #fff;
  margin-top: -25px;
  margin-left: 240px;
  width: 100px;
  font-size: 20px;
}

.el-header4 {
  color: #fff;
  margin-top: -25px;
  margin-left: 360px;
  width: 100px;
  font-size: 20px;
}

.el-header5 {
  color: #fff;
  margin-top: -25px;
  margin-left: 1000px;
  width: 400px;
  font-size: 15px;
}

.common-layout {
  margin-top: 10px;
  display: flex;
}

.ce1 {
  width: 80px;
  color: #BEBEBE;
  margin-top: -23px;
  margin-left: 65px;
}

.ce2 {
  width: 80px;
  color: #BEBEBE;
  margin-top: -23px;
  margin-left: 65px;
}

.ce3 {
  width: 80px;
  color: #BEBEBE;
  margin-top: -23px;
  margin-left: 65px;
}

.ce4 {
  width: 80px;
  color: #BEBEBE;
  margin-top: -23px;
  margin-left: 65px;
}

.el-icon {
  width: 20px;
  height: 20px;
  margin-top: 20px;
  margin-left: -80px;
}

.el-aside {
  background-color: #FFD9EC;
  height: 325px;
}
.carousel{
  width: 700px;
  height: 600px;
}
.liebiao{
  display: flex;
}
.card-header{
  height: 50px;
  width: 100px;
  margin-top: 20px;
  font-size: 20px;
}
.tjtup{
  width: 300px;
  height: 200px;
}
.tj{
  width: 400px;
  height: 350px;
  margin-top:80px ;
  margin-left: 50px;
}
.cl{
  color: #BEBEBE;
  font-size: 15px;
}
.el-button{
  background-color: #ffaad5;
  margin-left: 55px;
}
</style>